<!-- 
 * 日报管理
 * @author: 张锋
 * @since: 2025-02-10
 * index.vue
-->
<template>
  <div class="Projects-management-container h100">
    <div class="listPage">
      <div class="search">
        <Filters :formModel="state.formModel" :formLabel="state.formLabel" @reset="reset" @filter="filter"></Filters>
      </div>
      <div class="table">
        <TableCom :tableHeader="state.tableHeader" :tableData="state.tableData" :btnData="state.btnData" @getCurrentChange="getCurrentChange" @comEvent="tableEventCom" @colSelect="colSelect" @refresh="getAllLogs()" :pagination="state.pagination" :loading="loading" @getSelectChange="getSelectChange" @getSizeChange="getSizeChange" handleWidth="250">
          <!-- <functionBtn :btnList="btnList" @clickHandle="clickHandle"></functionBtn> -->
        </TableCom>
      </div>
    </div>
    <el-dialog v-model="isShowDialog" title="详情" width="1200" :before-close="closeDialog">
      <div class="detailWrap">
        <ul>
          <li>
            <p class="tit">项目名称：</p>
            <p class="con">{{ state.ProjectsRowData.projectName }}</p>
          </li>
          <li>
            <p class="tit">项目id：</p>
            <p class="con">{{ state.ProjectsRowData.projectId }}</p>
          </li>
          <li>
            <p class="tit">项目地址：</p>
            <p class="con">{{ state.position }}</p>
          </li>
          <li>
            <p class="tit">提交人：</p>
            <p class="con">{{ state.ProjectsRowData.createUserName }}</p>
          </li>
          <li>
            <p class="tit">提交时间：</p>
            <p class="con">{{ state.ProjectsRowData.createDate }}</p>
          </li>
          <li>
            <p class="tit">车况：</p>
            <p class="con">{{ state.ProjectsRowData.carStatus }}</p>
          </li>
        </ul>
        <ul>
          <li>
            <p class="tit">天气：</p>
            <p class="con">{{ state.weather.weather }}</p>
          </li>
          <li>
            <p class="tit">温度：</p>
            <p class="con">{{ state.weather.temperature }}</p>
          </li>

          <li>
            <p class="tit">风向：</p>
            <p class="con">{{ state.weather.wind_direction }}</p>
          </li>
        </ul>
        <ul>
          <li class="row">
            <p class="tit">当日工作：</p>
            <p class="con">{{ state.ProjectsRowData.workContent }}</p>
          </li>
        </ul>
        <ul>
          <li class="row">
            <p class="tit">次日计划：</p>
            <p class="con">{{ state.ProjectsRowData.tomorrrowPlan }}</p>
          </li>
        </ul>
        <ul>
          <li class="row">
            <p class="tit">问题备注：</p>
            <p class="con">{{ state.ProjectsRowData.remark }}</p>
          </li>
        </ul>
        <div class="imageWrap">
          <el-image v-for="item in fileArray" class="image" :key="item" ref="imageRef" style="width: 200px; height: 200px" :src="item" :preview-src-list="fileArray" fit="cover" />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog" size="mini">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, inject, onActivated } from 'vue'
import {
  getAllProjectsListAPI,
  getAllLogsAPI,
  // batchdelRole,
  batchStartRole,
  batchStopRole,
} from '@/api/interface/projects.js'
import { successHandle, colFilters } from '@/utils/common.js'
import { ElMessage, ElMessageBox, ImageInstance } from 'element-plus'

import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const router = useRouter()
const store = useStore()

const state = reactive({
  fileList: "",
  formModel: {
    //搜索列表的参数
    projectId: '', //项目名称
    time: '', //时间
    start: '', //开始时间
    end: '', //结束时间
  },
  formLabel: [
    {
      label: '项目名称',
      model: 'projectId',
      type: 'select',
      width: '160',
      option: [],
    },
    {
      label: '提交日期',
      model: 'time',
      type: 'datetimerange',
      width: '360',
      option: [],
    },
  ],
  tableData: [],
  tableHeader: [
    {
      label: '填报人员',
      prop: 'createUserName',
    },
    {
      label: '当日工作',
      prop: 'workContent',
    },
    {
      label: '次日计划',
      prop: 'tomorrrowPlan',
    },
    {
      label: '问题及备注',
      prop: 'remark',
    },
    {
      label: '填报日期',
      prop: 'createDate',
    },
  ],
  btnData: [
    {
      name: '详情',
      icon: 'bianji',
      color: '#25D390',
      change: 'detail',
    },
  ],
  ProjectsId: null, //项目id
  pagination: {
    //分页
    currentPage: 1,
    size: 1000,
    total: 0,
  },
  ProjectsRowData: {}, //table每一行数据
  weather: {},
  position: '',
  selectTableId: [], //选择表格数据
})

//项目管理模块功能按钮
const btnList = reactive([
  {
    name: '新增项目',
    icon: '',
    bgColor: '#25D390',
  },
])
//选择文件
const checkFile = (file, files) => {
  const name = file.raw.name.slice(file.raw.name.lastIndexOf('.')+1)
  if (name !== 'doc' && name !== 'docx' && name !== 'xls' && name !== 'xlsx' && name !== 'pdf') {
    files.forEach((v, i) => {
      if (v.name === file.name) {
        files.splice(i, 1)
      }
    })
    ElMessage.error('请上传指定格式的文件')
  }
  if (file.raw.size / 1024 / 1024 > 50) {
    files.forEach((v, i) => {
      if (v.name === file.name) {
        files.splice(i, 1)
      }
    })
    ElMessage.error('文件大小不超过50M')
  }
}
//删除提示
const beforeRemove = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `该操作将永久删除该文件，是否确定？`
  ).then(
    () => true,
    () => false
  )
}


//区域加载
const loading = ref(true)
//右侧抽屉
const isShowProjectsDrawer = ref(false)
//项目成员设置
const isShowProjectsMember = ref(false)
onMounted(() => {
  getAllProjects()
})

//获取所有的项目列表
const getAllProjects = () => {
  loading.value = true
  const params = {
    ipi: state.pagination.currentPage,
    ips: state.pagination.size,
    projectName: state.formModel.projectName,
    valid: state.formModel.valid,
  }
  getAllProjectsListAPI(params).then((res) => {
    const { status, data } = res
    if (status === 200) {
      loading.value = false
      data.result.map((item) => {
        state.formLabel[0].option.push({
          key: item.projectName,
          value: item.id,
        })
      })
      state.formModel.projectId = data.result[0].id
      getAllLogs()
    }
  })
}
//获取所有的日报列表
const getAllLogs = () => {
  loading.value = true
  const params = {
    ipi: 1,
    ips: 10,
    projectId: state.formModel.projectId,
    createStartDate: state.formModel.start,
    createEndDate: state.formModel.end,
  }
  getAllLogsAPI(params).then((res) => {
    const { status, data } = res
    if (status === 200) {
      loading.value = false
      state.tableData = data.result
      state.pagination.currentPage = data.pageNum
      state.pagination.size = data.pageSize
      state.pagination.total = data.total
      state.tableData.forEach((item) => {
        if (item.valid === null) {
          item.valid = false
        }
      })
    }
  })
}
const isShowDialog = ref(null)

//关掉弹窗
const closeDialog = () => {
  isShowDialog.value = false
}
//表格筛选列---取消全选
const colSelect = (data, type, e, currentItem) => {
  if (type === 'filter') {
    const currentData = colFilters(data, e, currentItem, state.tableHeader)
    state.tableHeader = currentData
  } else {
    //全选/全取消
    state.tableHeader = data
  }
}
const fileArray = ref([])
//表格中的操作
const tableEventCom = (type, data) => {
  switch (type) {
    case 'detail':
      isShowDialog.value = true
      state.ProjectsRowData = data
      state.weather = JSON.parse(data.weather)
      fileArray.value = data.fileArray
      state.position = JSON.parse(data.position).standard_address
      //跳转到详情
      break
  }
}

//搜索
const filter = () => {
  const [start, end] = state.formModel.time
  state.formModel.start = start
  state.formModel.end = end
  getAllLogs()
}
//重置
const reset = () => {
  for (let key in state.formModel) {
    state.formModel[key] = ''
  }
  getAllLogs()
}

//点击当前页
const getCurrentChange = (val) => {
  state.pagination.currentPage = val
  getAllLogs()
}

//点击条数
const getSizeChange = (val) => {
  state.pagination.size = val
  getAllLogs()
}

//选择表格数据
const getSelectChange = (row) => {
  state.selectTableId = row.map((item) => item.id)
}

const imageRef = ref<ImageInstance>()
const handleClick = () => {
  imageRef.value!.showPreview()
}
</script>

<style lang="scss" scoped>
.Projects-management-container {
  .title {
    font-weight: 700;
    margin-bottom: 20px;
  }

  .main-left {
    width: 50%;
    background-color: $base-title-color;
    margin-right: 1%;
  }

  .main-right {
    width: 50%;
    background-color: $base-title-color;

    .ProjectsLimitsConfig {
      .tree {
        margin: 10px 0;
      }
    }
  }
}
.detailWrap {
  ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    li {
      width: 340px;
      display: flex;

      .tit {
        width: 90px;
        font-size: 14px;
        font-weight: 600;
      }
      .con {
        font-size: 16px;

        width: calc(100% - 100px);
      }
    }
    .row {
      width: 100%;
    }
  }
  .imageWrap {
    padding: 30px;
    .el-image {
      margin: 10px;
    }
  }
}
</style>
